<template>
  <view>
	<!-- 展示信息  -->
	<view class="body" v-if="isUserLoggedIn">
	  <view class="user-info-container">
	    <!-- 头像 -->
	    <view class="img1">
	      <image style="width: 120rpx; height: 120rpx; border-radius: 200rpx; overflow: hidden;" :src="img"></image>
	    </view>
	    <!-- 昵称和性别 -->
	    <view class="name-sex-container">
	      <!-- 昵称 -->
	      <view class="name">
	        <view class="nameleft">
				<image style="width: 32rpx;height: 32rpx;"   src="../static/img/nickname.png"></image>
			</view>
	        <view class="nametext">
	          <text>{{ username }}</text>
	        </view>
	      </view>
	      <!-- 性别 -->
	      <view class="sex">
	        <view class="sextext">
				<image v-if="sex==='男生'" src="../static/img/sex_man.png" style="width: 16rpx;height: 16rpx;"></image>
				<image v-else src="../static/img/sex_woman.png" style="width: 16rpx;height: 16rpx;"></image>
			</view>
	      </view>
		  <!-- 手机号 -->
		    <view class="phone">
		      <view class="phoneleft">
				  <image style="width: 32rpx;height: 32rpx;" src="../static/img/tel.png"></image>
			  </view>
		      <view class="phonetext">
		        <text>{{ phone }}</text>
		      </view>
		    </view>
		  </view>
	    </view>
	  </view>
    <!-- 修改信息部分 -->
    <view class="menu-item" @click="navigateTo('checkInfo')" v-if="isUserLoggedIn">
	  <image src="../static/img/modifyInformation.png" style="width: 32rpx;height:32rpx;"></image>
      <text>修改信息</text>
	  <image class="arrow" src="../static/img/arrowhead.png" style="width: 16rpx;height: 16rpx;"></image>
	  <view class="line"></view>
    </view>

    <!-- 修改密码按钮 -->
    <view class="menu-item" @click="navigateTo('changePassword')" v-if="isUserLoggedIn">
		<image src="../static/img/changePassword.png" style="width: 32rpx;height:32rpx;"></image>
      <text>修改密码</text>
	  <image class="arrow" src="../static/img/arrowhead.png" style="width: 16rpx;height: 16rpx;"></image>
	  <view class="line"></view>
    </view>

    <!-- 更换账户按钮 -->
    <view class="menu-item" @click="navigateTo('changeAccount')" v-if="isUserLoggedIn">
		<image src="../static/img/changeAccount.png" style="width: 32rpx;height:32rpx;"></image>
      <text>更换账户</text>
	  <image class="arrow" src="../static/img/arrowhead.png" style="width: 16rpx;height: 16rpx;"></image>
	  <view class="line"></view>
    </view>
	<!-- 退出登录 -->
	<view class="menu-item" @click="logout" v-if="isUserLoggedIn">
	  <image src="../static/img/signOut.png" style="width: 32rpx;height:32rpx;"></image>
	  <text>退出登录</text>
	  <image class="arrow" src="../static/img/arrowhead.png" style="width: 16rpx;height: 16rpx;"></image>
	  <view class="line"></view>
	</view>
	
	<view class="page-container" v-else>
    <!-- 登录按钮 -->
    <view @click="navigateTo('login')"  class="button login">
      <text class="login-text">登录</text>
    </view>
	</view>
  </view>
</template>

<script>	
import {http} from "../static/service/requestAddress/rtas.js"
	import {socketurl} from "../static/service/requestAddress/rtas.js"
export default {
  data() {
    return {
      user: null, // 用户信息
	  sex:"",
	  username:"",
	  phone:"",
	  img:"",
    };
  },
  computed: {
    isUserLoggedIn() {
      // 使用用户信息中的某个字段来判断用户是否已登录
      return !!uni.getStorageSync("user");
    },
  },
  onShow(){
  	if(uni.getStorageSync("user")){
  		var user = JSON.parse(uni.getStorageSync("user"))
  		if(user.sex == 0){
  			this.sex = "女生"
  		}else{
  			this.sex = "男生"
  		}
  		this.phone = user.phone
  		this.username = user.name
  		this.img = user.img
  	}else{
  		uni.$u.toast("请先登录")
  	}
	},
  methods: {
    // 跳转到指定页面
    navigateTo(page) {
		console.log('Navigating to:', page);
      // 编写跳转逻辑，可以使用 uni.navigateTo
      // 根据传入的参数 page 决定跳转的页面
      switch (page) {
        case 'checkInfo':
          // 修改信息
          uni.navigateTo({ url: '/userSet/userSetindex' });
          break;
		  // 修改密码
        case 'changePassword':
          uni.navigateTo({ url: '/userSet/changePassword' });
          break;
        case 'changeAccount':
          uni.navigateTo({ url: '/pages/massage/login' });
          break;
        
        case 'login':
		  uni.navigateTo({ url: '/pages/massage/login' });
          break;
        // 可以根据需要添加其他页面的跳转逻辑
        default:
          break;
      }
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '确认退出登录',
        content: '您确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了确定按钮
            // 清空用户缓存信息
            uni.removeStorageSync("user");
			uni.removeStorageSync("system");
			uni.removeStorageSync("tabbar");
			uni.removeStorageSync("__DC_STAT_UUID");
            // 关闭 WebSocket 连接，如果有的话
            const websocketData = uni.getStorageSync("websocket");
            if (websocketData) {
              const websocket = JSON.parse(websocketData);
              if (websocket) {
                websocket.close();
              }
            }
    
            
			console.log("退出登录成功")
    
            // 跳转到登录页面或其他逻辑
            uni.reLaunch({ url: '/pages/massage/user' });
          }
        }
      });
    },

  }
};
</script>

<style scoped>
	
	@import url("../static/css/componentsCss/userSet/index.css");
</style>
